<template>
  <div class="user">
    <!-- 顶部功能 -->
    <van-cell-group>
      <van-cell class="user-info">
        <!-- 头像 -->
        <van-image
          width="50px"
          height="50px"
          round
          :src="userInfo.portrait || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
        ></van-image>
        <div class="user-info-content">
          <h3>{{ userInfo.userName }}</h3>
          <span>
            <van-icon name="edit"></van-icon>
            编辑个人信息
          </span>
        </div>
      </van-cell>
      <van-cell class="account-info">
        <van-grid :border="false">
          <van-grid-item>
            <span class="grid-item-value">14.05</span>
            <span>学习时长</span>
          </van-grid-item>
           <van-grid-item>
            <span class="grid-item-value">200</span>
            <span>钱包勾豆</span>
          </van-grid-item>
           <van-grid-item>
            <span class="grid-item-value">6</span>
            <span>优惠卷</span>
          </van-grid-item>
           <van-grid-item>
            <span class="grid-item-value">925</span>
            <span>学分</span>
          </van-grid-item>
        </van-grid>
      </van-cell>
      <van-cell icon="user-o" title="分销中心" is-link value="收益200"></van-cell>
      <van-cell icon="setting-o" title="个性化设置" is-link></van-cell>
      <van-cell icon="down" title="我的下载" is-link></van-cell>
      <van-cell icon="question-o" title="分帮助与反馈"></van-cell>
      <van-cell icon="info-o" title="关于拉钩教育" is-link value="v2.0.0"></van-cell>
    </van-cell-group>
    <!-- 底部导航 -->
    <layout-footer></layout-footer>
  </div>
</template>

<script>
import layoutFooter from '@/components/LayoutFooter'
import { getInfo } from '@/services/user'
export default {
  name: 'user',
  data () {
    return {
      userInfo: {}
    }
  },
  components: {
    layoutFooter
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    async loadUserInfo () {
      const { data } = await getInfo()
      this.userInfo = data.content
    }
  }
}
</script>

<style lang="scss" scoped>
// 用户信息
.user-info {
  padding: 30px 20px 0;
  background-color: rgb(248, 150, 3);
  .van-cell__value {
    display: flex;
    .user-info-content {
      padding-left: 15px;
      h3 {
        margin: 5px;
        font-size: 18px;
      }
    }
  }
}
// 账户信息
.account-info {
  background-color: rgb(248, 150, 3);
  margin-top: -1px;
  .van-cell__value{
    border-radius: 10px;
    // overflow: hidden;
    .grid-item-value {
      font-size: 22px;
      font-weight: 700;
    }
  }
}
</style>
